<template>
	<view>
		<cu-custom :isBack="true" bgColor="bg-blue">
			<block slot="content">辊耗统计</block>
			<template slot="backText">
				<text class="cuIcon-back" @tap="beforePage"></text>
			</template>
		</cu-custom>
		<view style="height: 138upx;" class="padding-tb-20 padding-lr-30">
			<view class="search-fixed bg-blue" :style="{marginTop: CustomBar + 'px'}">
				<!-- 时间选择器 -->
				<view class="flex align-center date-select u-font-weight6 bg-blue">
					<picker mode="date" :value="date" start="1970-01-01" @change="DateChange">
						<view class="picker">
							{{date}}
						</view>
					</picker>
					<text class="ph-sousuoshijian position-text text-blue"></text>
				</view>
			</view>
		</view>
		<!-- 主题内容 -->
		<view  class="padding-t">
			<view class="public-main-info">
				<!-- 吨钢辊号对比 -->
				<view class="u-main">
					<view class="u-main-title">
						吨钢辊耗对比
					</view>
					<view class="u-main-line"></view>
					<view class="u-main-info padding2030">
						<!-- 下面表格 -->
						<view class="u-table">
							<view>
								<view class="u-table-head">
									<view class="u-table-head-item u-font-weight">分类</view>
									<view class="u-table-head-item u-font-weight">制造厂家</view>
									<view class="u-table-head-item u-font-weight">原始轧辊量(t)</view>
									<view class="u-table-head-item u-font-weight">消耗量(t)</view>
									<view class="u-table-head-item u-font-weight">剩余轧辊量(t)</view>
									<view class="u-table-head-item u-font-weight">轧制量(t)</view>
									<view class="u-table-head-item u-font-weight">吨钢消耗(kg/t)</view>
									<view class="u-table-head-item u-font-weight">累计产量(t)</view>
									<view class="u-table-head-item u-font-weight">辊耗(kg/t)</view>
								</view>
								<view>
									<scroll-view scroll-y="true" class="u-table-bady">
										<view class="u-table-bady-column" v-for="(item, index) in tableData" :key="index">
											<view class="u-table-head-item">{{item.classification}}</view>
											<view class="u-table-head-item">{{item.Manufacturer}}</view>
											<view class="u-table-head-item">{{item.originalRollVolume}}</view>
											<view class="u-table-head-item">{{item.consumption}}</view>
											<view class="u-table-head-item">{{item.remainingRollAmount}}</view>
											<view class="u-table-head-item">{{item.rollingAmount}}</view>
											<view class="u-table-head-item">{{item.rollConsumptionPerTonOfSteel}}</view>
											<view class="u-table-head-item">{{item.cumulativeProduction}}</view>
											<view class="u-table-head-item">{{item.rollConsumption}}</view>
										</view>
									</scroll-view>
								</view>
							</view>
						</view>
					</view>
				</view>
				
				<view class="u-main">
					<view class="u-main-title">吨钢辊耗趋势</view>
					<view class="u-main-line"></view>
					<view class="u-main-info padding2030">
						<!-- 下面图表 -->
						<view class="monter-echarts">
							<u-charts
							 class="monter-echarts"
							 :legend="monterPrarm.legend"
							 :canvas-id="monterPrarm.id" 
							 :chartType="monterPrarm.chartType" 
							 :cWidth="monterPrarm.radarWidth" 
							 :cHeight="monterPrarm.radarHeight" 
							 :opts="monterPrarm.opts"
							 :xAxis="monterPrarm.xAxis"
							 :ref="monterPrarm.id" />
						</view>
					</view>
				</view>
				
				<!-- 辊号异常信息 -->
				<view class="u-main">
					<view class="u-main-title">辊耗异常信息</view>
					<view class="u-main-line"></view>
					<view class="u-main-info padding2030">
						<!-- 下面表格 -->
						<view class="u-table">
							<view>
								<view class="u-table-head">
									<view class="u-table-head-item u-font-weight">辊号</view>
									<view class="u-table-head-item u-font-weight">厂家名称</view>
									<view class="u-table-head-item u-font-weight">轧辊编号</view>
									<view class="u-table-head-item u-font-weight">材质</view>
									<view class="u-table-head-item u-font-weight">辊径</view>
									<view class="u-table-head-item u-font-weight">轧制公里数</view>
									<view class="u-table-head-item u-font-weight">吨钢辊耗</view>
								</view>
								<view class="u-table-bady">
									<view class="u-table-bady-column" v-for="(item, indess) in tableYiList" :key="indess">
										<view class="u-table-head-item">{{item.rollNumber}}</view>
										<view class="u-table-head-item">{{item.Manufacturer}}</view>
										<view class="u-table-head-item">{{item.rollNumber}}</view>
										<view class="u-table-head-item">{{item.material}}</view>
										<view class="u-table-head-item">{{item.rollDiameter}}</view>
										<view class="u-table-head-item">{{item.rollingKilometers}}</view>
										<view class="u-table-head-item">{{item.rollConsumptionPerTonOfSteel}}</view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { post, getTime } from "@/lib/Util.js";
	import uCharts from '@/components/u-charts/component.vue';
	import {GET_ROLL_STATISTICS_INFO, GET_ROLL_TREND_INFO, GET_ROLL_CONSUMPTION_INFO} from '@/common/api/roll.js';
	export default {
		components: { uCharts },
		data() {
			return {
				date: '',
				tableData: [],
				monterPrarm: {
					legend: {
						data: ['吨钢辊耗'],
						position: 'top',
						float: 'right',
						fontColor: 'rgba(0,0,0,0.60)'
					},
					radarWidth: uni.upx2px(670),
					radarHeight: uni.upx2px(493),
					chartType: "line",
					extraType: "",
					id: "monter",
					xAxis: {
						disabled:true,
						disableGrid:true,
						itemCount: 8,
					},
					opts: {
						categories: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30],
						series: [{
							name: '吨钢辊耗',
							data: [0, 0, 0, 0, 0, 0],
						}]
					}
				},
				tableYiList: [],
			}
		},
		onLoad() {
			this.date = getTime()
			this.getInfo()
			this.getDunInfo()
			this.getYi()
		},
		methods: {
			beforePage() {
				uni.navigateBack({
					delta: 1
				});
			},
			DateChange(e) {
				this.date = e.detail.value
				this.getInfo()
				this.getDunInfo()
				this.getYi()
			},
			async getInfo() {
				let res = await post(GET_ROLL_STATISTICS_INFO, {
					time: this.date
				})
				if(res.code == 0) {
					this.tableData = res.data
				}
			},
			async getDunInfo() {
				let res = await post(GET_ROLL_TREND_INFO, {
					time: this.date
				})
				if(res.code == 0) {
					this.monterPrarm.opts.series[0].data = res.data.curve
				}
			},
			async getYi() {
				let res = await post(GET_ROLL_CONSUMPTION_INFO, {
					time: this.date
				})
				if(res.code == 0) {
					this.tableYiList = res.data
				}
			}
		}
	}
</script>

<style>
	.monter-echarts {
		width: 670upx;
		height: 493upx;
	}
</style>
